<template lang="html">
  <section class="result-wrapper">
    <!-- result-header -->
    <div class="result-header">
      <p class="result-tips" v-if="!searchResultList || searchResultList.length <= 0 ">正在加载...</p>
      <ul class="tab-list swiper-pagination" v-if="searchResultList && searchResultList.length > 0"></ul>
    </div>
    <!-- result-body -->
    <div class="result-body">
      <p class="result-body-title" v-show="!isUp">
        <span class="title">小学数学</span>
        <span class="time">2016-03-10</span>
      </p>
      <div class="result-body-img" v-show="!isUp">
        <img :src="result.imageUrl" alt="">
      </div>
      <div class="result-body-footer">
        <a href="javascript:void(0);" class="up-btn" @click="takeUp()"><i class="iconfont" :class="{'icon-shouye28': isUp, 'icon-shouye2': !isUp}"></i>收起</a>
      </div>
    </div>
    <!-- result-list-box -->
    <div class="result-list-box swiper-container" ref="list-box">
      <!-- 占位图 -->
      <ul class="result-list" v-if="firstLoad">
        <li class="result-item active space">
          <!-- 题目 -->
          <div class="result-block stmt">
            <h3 class="result-block-label"><i class="iconfont icon-shouye"></i>题目</h3>
            <div class="result-block-content">
              <ul class="animated-background">
        				<li class="background-masker header-top"></li>
        				<li class="background-masker header-right"></li>
        				<li class="background-masker header-bottom"></li>
                <li class="background-masker subheader-right"></li>
        				<li class="background-masker subheader-bottom"></li>
              </ul>
            </div>
          </div>
          <!-- 思路分析 -->
          <div class="result-block analysis">
            <h3 class="result-block-label"><i class="iconfont icon-shouye9"></i>思路分析</h3>
            <div class="result-block-content">
              <ul class="animated-background">
                <li class="background-masker header-top"></li>
        				<li class="background-masker header-right"></li>
        				<li class="background-masker header-bottom"></li>
                <li class="background-masker subheader-right"></li>
        				<li class="background-masker subheader-bottom"></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
      <!-- 题目列表 -->
      <ul class="result-list swiper-wrapper" ref="list" v-if="searchResultList && searchResultList.length > 0">
        <li
          class="result-item swiper-slide"
          :class="{'active': $index === current}"
          v-for="item, $index in searchResultList"
          :key="$index"
          ref="item">
          <!-- 题目 -->
          <div class="result-block stmt">
            <h3 class="result-block-label"><i class="iconfont icon-shouye"></i>题目</h3>
            <div class="result-block-content" v-html="item.stmt"></div>
          </div>
          <!-- 思路分析 -->
          <div class="result-block analysis">
            <h3 class="result-block-label"><i class="iconfont icon-shouye9"></i>思路分析</h3>
            <div class="result-block-content" v-html="item.analysis"></div>
          </div>
          <!-- 解题过程 -->
          <div class="result-block answer">
            <h3 class="result-block-label"><i class="iconfont icon-shouye4"></i>解题过程</h3>
            <div class="result-block-content" v-html="item.answer"></div>
          </div>
          <!-- 敲黑板划重点 -->
          <div class="result-block comment">
            <h3 class="result-block-label"><i class="iconfont icon-shouye19"></i>敲黑板划重点</h3>
            <div class="result-block-content" v-html="item.comment"></div>
          </div>
        </li>
      </ul>
    </div>
    <!-- share -->
    <a href="javascript:void(0)" class="share-btn" v-show="!firstLoad">分享</a>
    <!-- result-footer -->
    <ul class="result-footer">
      <li class="result-footer-btn ask-btn" :class="{'forbidden': firstLoad}" @click="ask()">问老师</li>
      <li class="result-footer-btn" :class="{'forbidden': firstLoad}" @click="take()">再拍一题</li>
    </ul>
    <!-- 提示弹层 -->
    <div class="tip-modal">
      <div class="tips-heading"></div>
      <div class="tips-body">

      </div>
    </div>
  </section>
</template>

<script>
import Tool from '@/assets/script/tool';
// import {listData} from '@/assets/script/mock';
export default {
  data() {
    return {
      current: 0,
      firstLoad: true,
      result: {},
      searchResultList: [],
      isUp: false
    }
  },
  methods: {
    changePage(target) {
      this.searchResultList.map((item, index) => {
        if(item.examId === target.examId) {
          this.current = index;
        }
      });
    },
    // 设置滚动
    setSwiper() {
      var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          paginationBulletRender: function (swiper, index, className) {
              return '<li class="' + className + ' tab-item' + '">' + (index + 1) + '</li>';
          }
      });
    },
    // 收起
    takeUp() {
      this.isUp = !this.isUp;
    },
    getList() {
      this.$http({
        method: 'get',
        url: '/getList',
        data: {
          firstName: 'Fred'
        }
      }).then(result => {
        let response = result.data;
        this.result = response.data;

        this.searchResultList = this.result.searchResultList;
        this.$nextTick(() => {
          this.setSwiper();
        });
      }).then(()=> {
        this.firstLoad = false;
      });
    },
    init() {
      var self = this;
      // setTimeout(function () {
        self.getList();
      // }, 1000);
    },
    // 再拍一题
    take() {
      if(this.firstLoad) return;
      alert("再拍一题");
    },
    // 问老师
    ask() {
      if(this.firstLoad) return;
      alert("问老师");
    }
  },
  mounted() {
    var self = this;
    self.init();
  }
}
</script>

<style lang="scss">
@import "../../assets/scss/default.scss";
.result-wrapper {
  width: px2rem(750);
}
.result-header {
  width: 100%;
  height: px2rem(80);
  background-color: $white;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  .result-tips {
    text-align: center;
    color: $blue;
    font-size: px2rem(32);
    line-height: px2rem(80);
  }
  .tab-list {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $grey;
    .tab-item {
      width: px2rem(60);
      height: px2rem(60);
      line-height: px2rem(60);
      font-size: px2rem(32);
      margin-right: px2rem(20);
      text-align: center;
      border-radius: 50%;
      background: $white !important;
      color: $default !important;
      opacity: 1;
      &:last-child {
        margin-right: 0;
      }
      &.swiper-pagination-bullet-active {
        background: $blue !important;
        color: $white !important;
      }
    }
  }
}
.result-body {
  width: 100%;
  margin-top: px2rem(80);
  position: relative;
  z-index: 1;
  .result-body-title {
    padding: 0 px2rem(30);
    font-size: px2rem(36);
    line-height: px2rem(60);
    color: $default;
    &>.title {
      margin-right: px2rem(10);
    }
    &>.time {
      font-size: px2rem(32);
    }
  }
  .result-body-img {
    width: px2rem(640);
    height: px2rem(480);
    overflow: hidden;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  .result-body-footer {
    width: 100%;
    height: px2rem(70);
    padding: 0 px2rem(30);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .up-btn {
      color: $blue;
      font-size: px2rem(32);
    }
  }
}
.result-list-box {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: px2rem(90);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  .result-list {
    width: 100%;
  }
}
.result-item {
  width: px2rem(750);
  overflow-x: scroll;
  .result-block {
    width: 100%;
    border-top: 1px solid $grey;
    padding: px2rem(30);
    box-sizing: border-box;
    .result-block-label {
      color: $default;
      font-size: px2rem(32);
      font-weight: normal;
      line-height: px2rem(40);
      .iconfont {
        color: #999999;
        margin-right: px2rem(10);
      }
    }
  }
  &.space {
    .result-block-content {
      width: 100%;
      height: px2rem(120);
      background: $white;
      .animated-background {
  			animation-duration: 1s;
  			animation-fill-mode: forwards;
  			animation-iteration-count: infinite;
  			animation-name: placeHolderShimmer;
  			animation-timing-function: linear;
  			background: #f6f7f8;
  			background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  			background-size: 200% 100%;
  			height: 100%;
  			position: relative;
  		}
  		.background-masker {
  		  background: #fff;
  		  position: absolute;
        &.header-top,
        &.header-bottom,
        &.subheader-bottom {
          left: 0;
          right: 0;
          height: px2rem(20);
        }
        &.header-top {
          top: 0;
        }
        &.header-right {
          top: px2rem(20);
          right: 0;
          width: px2rem(0);
          height: px2rem(30);
        }
        &.header-bottom {
          top: px2rem(50);
        }
        &.subheader-right {
          top: px2rem(70);
          right: 0;
          width: px2rem(240);
          height: px2rem(30);
        }
        &.subheader-bottom {
          top: px2rem(100);
        }
  		}
    }
  }
}
@keyframes placeHolderShimmer {
  0% {
		background-position: -60% 0;
	}
	100% {
		background-position: 60% 0;
	}
}
.result-footer {
  position: fixed;
  z-index: 3;
  bottom: 0;
  left: 0;
  width: px2rem(750);
  height: px2rem(80);
  background-color: $default;
  display: flex;
  justify-content: center;
  align-items: center;
  .result-footer-btn {
    width: px2rem(200);
    font-size: px2rem(36);
    line-height: px2rem(50);
    margin-right: px2rem(20);
    color: $default;
    background-color: $white;
    border-radius: 5px;
    text-align: center;
    &:last-child {
      margin-right: 0;
    }
    &.forbidden {
      background-color: $grey;
      color: #dddddd;
    }
  }
}
.share-btn {
  position: fixed;
  right: px2rem(30);
  bottom: px2rem(120);
  width: px2rem(90);
  height: px2rem(90);
  line-height: px2rem(90);
  text-align: center;
  border-radius: 50%;
  color: $white;
  background-color: $blue;
  z-index: 3;
}
</style>
